<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
    <style>
        body{background-color:white}
        a{text-decoration : none}
        .header {
            height: 110px;
            background: url(headbg.jpg) repeat-x left bottom;
        }
        .f-color{
            color:rgb(238,34,34)
        }
        a:hover{
            text-decoration: underline;
            color:rgb(136, 4, 4)
        }
        .reg-other-icon {
            display: inline-block;
            margin: 0 8px 2px 0;
            vertical-align: middle;
            width: 26px;
            height: 26px;
            background-position: 0 -160px;
        }
        .form-agreen .agree-tip i, .form-agreen .sim-checkbox, .form-item .i-cancel, .reg-other .reg-ohter-icon {
            background: url(reg-icon.png) no-repeat;
        }
        .logo-title {
            float: left;
            height: 34px;
            line-height: 34px;
            font-size: 24px;
            color: #333;
            margin-top: 34px;
        }
        .logo {
            width: 160px;
            height: 50px;
            float: left;
            margin-top: 24px;
            background: url(icon.png) no-repeat;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row space-between header">
            <div class="col-6">
                <a href="https://www.jd.com" class="logo"></a>
                <div class="logo-title">欢迎光临</div>
            </div>
            <div class="col-6" style="">
                <div style="margin-top: 55px;float:right">
                已有账号？ <a href="#" class="f-color">请登录></a>
                </div>
            </div>
        </div>
        <div class="row space-between" style="justify-content: center;"> 
            <div class="col-6" style="background-color: aquamarine;height:300px;">
                <form action="">

                    <div class="input-group mb-3">
                        <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">中国 0086</button>
                        <ul class="dropdown-menu">
                          <li><a class="dropdown-item" href="#">美国 XXXX</a></li>
                          <li><a class="dropdown-item" href="#">日本 XXXX</a></li>
                          <li><a class="dropdown-item" href="#">韩国 XXXX</a></li>
                          <li><hr class="dropdown-divider"></li>
                          <li><a class="dropdown-item" href="#">Separated link</a></li>
                        </ul>
                        <input type="text" class="form-control" aria-label="Text input with dropdown button" placeholder="请输入手机号">
                    </div>
                    <div>
                        <button type="button" class="btn btn-light">点击按钮进行验证</button>
                    </div>
                    
                    <div>
                        <button type="button" class="btn" style="background-color: #e2231a;">下一步</button>
                    </div>
                </form>
                <div class="row">
                    <div class="col-6">
                        <i class="reg-ohter-icon"> </i>
                        <a>企业用户注册</a>
                    </div>
                    <div class="col-6">
                        <a>海外用户注册</a>
                    </div>
                </div>
            </div>
        
        </div>
        <div class="row space-between" style="justify-content: center;">
            <div class="col-12">
                <ul class="list-inline">
                    <li class="list-inline-item">
                        <a href="#">关于我们</a>  |  
                    </li>
                    <li class="list-inline-item">
                        <li class="list-inline-item">
                            <a href="#">联系我们</a>  |  
                        </li>
                    </li>
                    <li class="list-inline-item">
                        <a href="#">关于我们</a>  |  
                    </li>
                    <li class="list-inline-item">
                        <a href="#">关于我们</a>  |  
                    </li>
                    <li class="list-inline-item">
                        <li class="list-inline-item">
                            <a href="#">联系我们</a>  |  
                        </li>
                    </li>
                    <li class="list-inline-item">
                        <a href="#">关于我们</a>  |  
                    </li>
                    <li class="list-inline-item">
                        <a href="#">关于我们</a>  |  
                    </li>
                    <li class="list-inline-item">
                        <li class="list-inline-item">
                            <a href="#">联系我们</a>  |  
                        </li>
                    </li>
                    <li class="list-inline-item">
                        <a href="#">关于我们</a>  |  
                    </li>
                
                </ul>
                  
            </div>

        </div>
    </div>
</body>
</html>